<template>
  <view class="comment">
    <view v-for="(res, index) in commentList" :key="index" class="comment-item u-p-30 u-flex u-col-top">
      <view @click.stop="linkDetail(res)" class="left">
        <u-image :src="res.avatar" mode="aspectFill" width="64" height="64" shape="circle"></u-image>
      </view>
      <view class="right u-flex-1 u-m-l-20">
        <view class="top u-flex u-row-between">
          <view class="name u-flex-1">{{ res.nickname || "" }}</view>
          <view @click.stop="reward(res)" v-if="inquireId && uid == vuex_user_id && res.is_dd == 0" class="like u-m-r-30 u-flex">
            <u-icon name="rmb-circle" size="50" color="#999"></u-icon>
            <view class="num u-font-34 u-m-l-4">打赏</view>
          </view>
          <view v-if="inquireId" @click="fabulous(index, res.id, res.is_d, res.dian)" class="like u-font-26 u-flex">
            <u-icon name="thumb-up" size="36" :color="res.is_d == 1 ? `#389bf2` : '#999'"></u-icon>
            <view :class="{active: res.is_d == 1}" class="num u-m-r-4">{{ res.dian || "" }}</view>
          </view>
          <view v-else @click="fabulous(index, res.id, res.is_qtd, res.dian)" class="like u-font-26 u-flex">
            <u-icon name="thumb-up" size="36" :color="res.is_qtd == 1 ? `#389bf2` : '#999'"></u-icon>
            <view :class="{active: res.is_qtd == 1}" class="num u-m-r-4">{{ res.dian || "" }}</view>
          </view>
        </view>
        <view class="content">{{ res.content || "" }}</view>
        <view class="reply-box">
          <view v-for="(item, ind) in res.ch.slice(0, 2)" :key="ind" class="item u-p-20">
            <view class="username u-font-24">{{ item.nickname || "" }}</view>
            <view class="text u-m-t-10">{{ item.content }}</view>
          </view>
          <view class="all-reply u-p-20 u-flex" @tap="toAllReply(res.id)" v-if="res.ch">
            共{{ res.ch.length }}条回复
            <u-icon class="more u-m-l-6" name="arrow-right" :size="26"></u-icon>
          </view>
        </view>
        <view class="bottom u-m-t-20 u-font-24 u-flex">
          <view @click="replyInputShow(index)" class="reply">回复</view>
        </view>
        <view v-if="res.replyShow" class="inputbox u-m-t-10 u-text-right">
          <view class="input">
            <u-input v-model="content" type="textarea" placeholder="您想说点什么呢" :border="true" />
          </view>
          <view @click="releaseComment(res.id)" class="btn u-m-t-20">评论</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "com-comment",
  data() {
    return {
      content: "",
    };
  },
  props: {
    // 发布人id
    uid: {
      type: [Number, String],
      default: "",
    },
    // 打听id
    inquireId: {
      type: [Number, String],
      default: "",
    },
    // 话题id
    topicId: {
      type: [Number, String],
      default: "",
    },
    // 评论列表
    commentList: {
      type: Array,
      default: () => [],
    },
  },
  computed: {
    ...mapState(["vuex_user_id", "vuex_power_01"]),
  },
  methods: {
    // 点赞
    fabulous(index, id, status, number) {
      this.$emit("fabulous", {
        index: index,
        id: id,
        status: status,
        number: number,
      });
    },
    // 打赏
    reward(data) {
      this.$emit("reward", data);
    },
    // 跳转详情
    linkDetail(data) {
      let url =
        data.is_lvs == 1
          ? `/pages/subpackages/detail/lawyer?id=${data.user_id}`
          : `/pages/subpackages/detail/user?id=${data.user_id}`;
      uni.navigateTo({
        url,
      });
    },
    // 显示评论框
    replyInputShow(index) {
      this.commentList[index].replyShow = !this.commentList[index].replyShow;
    },
    // 评论
    releaseComment(id) {
      if (!this.vuex_user_id) return this.$t.goLogin();
      if (!this.vuex_power_01) return this.$t.goPower(1);
      let data = {
        user_id: this.vuex_user_id,
        selected_id: this.inquireId,
        content: this.content,
        pid: id,
      };
      if (!data.content) return this.$u.toast("请填写评论内容~");
      if (this.inquireId) {
        data.selected_id = this.inquireId;
        console.log(data);
        // return;
        this.$api.inquire.releaseComment(data).then((res) => {
          console.log(res);
          this.$u.toast(res.msg);
          if (res.code == 200) {
            this.$emit("refresh", true);
          }
        });
      } else {
        data.topic_discussion_id = this.topicId;
        console.log(data);
        // return;
        this.$api.releaseComment(data).then((res) => {
          console.log(res);
          this.$u.toast(res.msg);
          if (res.code == 200) {
            this.$emit("refresh", true);
          }
        });
      }
    },
    // 跳转到全部回复
    toAllReply(id) {
      let url = this.inquireId
        ? `/pages/subpackages/classify/inquire/reply?inquireid=${this.inquireId}&commentid=${id}&uid=${this.uid}`
        : `/pages/subpackages/topic/comment/reply?topicid=${this.topicId}&commentid=${id}`;
      uni.navigateTo({ url });
    },
  },
};
</script>

<style lang="scss" scoped>
.comment {
  background-color: $uni-bg-color;
  border-radius: 10rpx;

  &-item {
    .top {
      .name {
        color: $uni-text-color-main;
      }

      .like {
        color: $uni-text-color-grey;

        .num {
          &.active {
            color: $uni-text-color-main;
          }
        }
      }
    }

    .content {
      margin: 10rpx 0;
    }

    .reply-box {
      background-color: $uni-bg-color-grey;
      border-radius: 10rpx;

      .item {
        border-bottom: 1px solid $u-border-color;

        .username {
          color: $uni-text-color-grey;
        }
      }

      .all-reply {
        color: $uni-text-color-main;
      }
    }

    .bottom {
      color: $uni-text-color-grey;

      .reply {
        color: $uni-text-color-main;
      }
    }

    .inputbox {
      color: $uni-text-color-main;

      .btn {
        display: inline-block;
        padding: 8rpx 30rpx;
        background-color: $uni-text-color-main;
        border-radius: 6rpx;
        color: $uni-text-color-inverse;
      }
    }
  }
}
</style>
